import { addLink, updateLink } from "@/api/content/link";
import { Link } from "@/types/content/link";
import { Form, Input, message, Modal, Select, Spin, Image } from "antd";
import { useForm } from "antd/es/form/Form";
import { useEffect, useState } from "react";
interface Props {
  isModalOpen: boolean;
  optionType: "add" | "edit";
  oldInfo?: Link.Row;
  close?: () => void;
  change?: () => void;
}
export default function OptionForm(props: Props) {
  const [loading, setLoading] = useState(false);
  const [logo, setLogo] = useState("");
  const [form] = useForm();
  const [messageApi] = message.useMessage();
  /**
   * 添加接口
   * @param data
   */
  const addInf = async (data: Link.Form) => {
    setLoading(true);
    const res = await addLink(data);
    setLoading(false);
    if (res.code === 200) {
      messageApi.success("新增成功");
      props.close && props.close();
      props.change && props.change();
    }
  };
  /**
   * 修改接口
   * @param data
   */
  const updateInf = async (data: Link.Form) => {
    setLoading(true);
    const res = await updateLink(data);
    setLoading(false);
    if (res.code === 200) {
      messageApi.success("修改成功");
      props.close && props.close();
      props.change && props.change();
    }
  };
  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      const { name, address, logo, status, description } = values;
      const params = {
        name,
        address,
        logo,
        status,
        description,
      };
      if (props.optionType === "add") {
        addInf(params);
      } else if (props.optionType === "edit") {
        updateInf({
          ...(props.oldInfo || {}),
          ...params,
          id: props.oldInfo?.id,
        });
      }
    } catch (errorInfo) {
      console.log("Failed:", errorInfo);
    }
  };

  useEffect(() => {
    if (props.optionType === "edit") {
      form.setFieldsValue(props.oldInfo || {});
    }
  }, [form, props.oldInfo, props.optionType]);
  return (
    <Modal
      title={props.optionType === "add" ? "新增链接" : "修改链接"}
      open={props.isModalOpen}
      onOk={handleOk}
      onCancel={() => props.close && props.close()}
    >
      <Spin spinning={loading}>
        <Form
          form={form}
          name="linkOptionForm"
          size="middle"
          autoComplete="off"
          layout="vertical"
        >
          <Form.Item<Link.Form>
            name="name"
            label="链接名称"
            rules={[
              { required: true, message: "请输入链接名称" },
              { max: 50, message: "链接名称最长50个字" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item<Link.Form>
            name="logo"
            label="logo"
            rules={[{ required: true, message: "请选择网站logo" }]}
          >
            <Input
              onChange={(e) => {
                setLogo(e.currentTarget.value);
              }}
            />
          </Form.Item>
          <Image.PreviewGroup>
            <Image width={150} src={logo} />
          </Image.PreviewGroup>
          <Form.Item<Link.Form>
            name="address"
            label="链接地址"
            rules={[{ required: true, message: "请输入地址" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<Link.Form> name="status" label="审核状态">
            <Select
              style={{ width: 120 }}
              options={[
                { value: "0", label: "审核已通过" },
                { value: "1", label: "审核未通过" },
                { value: "2", label: "未审核" },
              ]}
            />
          </Form.Item>
          <Form.Item<Link.Form> name="description" label="描述">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
}
